import React, { Component,Fragment } from 'react';
import {Card,Form,Input,Radio,InputNumber,Select,Switch,DatePicker,TimePicker,Upload,Icon,Checkbox,Button,message} from 'antd'
import moment from 'moment'
class FormLogin extends Component {
    state = {
        loading:false
    }
    getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }
    //判断图片大小和格式(现在这个服务器要求只能是jpeg,自己服务器可以配置)
    beforeUpload = (file) => {
        const isJPG = file.type === 'image/jpeg';
        if (!isJPG) {
          message.error('You can only upload JPG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('Image must smaller than 2MB!');
        }
        return isJPG && isLt2M;
      }

    handleChange=(info) => {
        if(info.file.status === 'uploading'){
            this.setState({
                loading:true
            })
            return
        }
        if(info.file.status === 'done') {
            this.getBase64(info.file.originFileObj, imageUrl => this.setState({
                imageUrl,
                loading: false,
            }));
        }
    }
    onSubmit = () => {
        //错误处理
        this.props.form.validateFields((err,info) => {
            if(!err) {
                const regInfo = this.props.form.getFieldsValue()
                console.log(regInfo)
                //图像地址=服务器地址+图像name
                console.log(`https://jsonplaceholder.typicode.com/posts/${regInfo.avatar.fileList[0].name}`)
                //生日
                console.log(moment(regInfo.birthday).format('YYYY-MM-DD'))
                //早起时间
                console.log(moment(regInfo.time).format('HH:mm:ss'))
                message.info(`注册成功`)
            }
        })
    }
    render() {
        const FormItem = Form.Item
        const RadioGroup = Radio.Group
        const SelectOption = Select.Option
        const InputTextArea = Input.TextArea
        const { getFieldDecorator } = this.props.form
        const itemLayout = {
            labelCol:{
                span:'4'
            },
            wrapperCol:{
                span:'20'
            }
        }
        const offsetItemLayout = {
            labelCol:{
                span:'4'
            },
            wrapperCol:{
                span:'20',
                offset:'4'
            }
        }
        return (
            <Fragment>
                <Card title="注册表单">
                    <Form>
                        <FormItem label="用户名" {...itemLayout}>
                            {
                                getFieldDecorator('userName',{
                                    initialValue:'',
                                    rules:[
                                        {
                                            required:true,
                                            message:'用户名不能为空'
                                        }
                                    ]
                                })(
                                    <Input style={{width:'600px'}} placeholder="请输入用户名" />
                                )
                            }
                        </FormItem>
                        <FormItem label="密码" {...itemLayout}>
                            {
                                getFieldDecorator('userPwd',{
                                    initialValue:'',
                                    rules:[
                                        {
                                            required:true,
                                            message:'密码不能为空'
                                        }
                                    ]
                                })(
                                    <Input style={{width:'600px'}} placeholder="请输入密码" />
                                )
                            }
                        </FormItem>
                        <FormItem label="性别" {...itemLayout}>
                            {
                                getFieldDecorator('sex',{
                                    initialValue:'1'
                                })(
                                    <RadioGroup>
                                        <Radio value="1">男</Radio>
                                        <Radio value="2">女</Radio>
                                    </RadioGroup>
                                )
                            }
                        </FormItem>
                        <FormItem label="年龄" {...itemLayout}>
                            {
                                getFieldDecorator('age',{
                                    initialValue:'18'
                                })(
                                    <InputNumber />
                                )
                            }
                        </FormItem>
                        <FormItem label="当前状态" {...itemLayout}>
                            {
                                getFieldDecorator('state',{
                                    initialValue:'1'
                                })(
                                    <Select>
                                        <SelectOption value="1">咸鱼一条</SelectOption>
                                        <SelectOption value="2">风华浪子</SelectOption>
                                        <SelectOption value="3">北大才子一枚</SelectOption>
                                        <SelectOption value="4">百度FE</SelectOption>
                                        <SelectOption value="5">创业者</SelectOption>
                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem label="爱好" {...itemLayout}>
                            {
                                getFieldDecorator('interset',{
                                    initialValue:["1","2"]  //需要引号
                                })(
                                    <Select mode="multiple">
                                        <SelectOption value="1">游泳</SelectOption>
                                        <SelectOption value="2">打篮球</SelectOption>
                                        <SelectOption value="3">踢足球</SelectOption>
                                        <SelectOption value="4">跑步</SelectOption>
                                        <SelectOption value="5">爬山</SelectOption>
                                        <SelectOption value="6">骑行</SelectOption>
                                        <SelectOption value="7">桌球</SelectOption>
                                        <SelectOption value="8">麦霸</SelectOption>
                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem label="是否已婚" {...itemLayout}>
                            {
                                getFieldDecorator('isMarried',{
                                    valuePropName:'checked',
                                    initialValue:false
                                })(
                                    <Switch />
                                )
                            }
                        </FormItem>
                        <FormItem label="生日" {...itemLayout}>
                            {
                                getFieldDecorator('birthday',{
                                    initialValue:moment('2000-01-01')
                                })(
                                    <DatePicker></DatePicker>  
                                )
                            }
                        </FormItem>
                        <FormItem label="联系地址" {...itemLayout}>
                            {
                                getFieldDecorator('address',{
                                    initialValue:'北京市海淀区奥林匹克公园'
                                })(
                                    <InputTextArea autosize={{minRows:"5"}}/>
                                )
                            }
                        </FormItem>
                        <FormItem label="早起时间" {...itemLayout}>
                            {
                                getFieldDecorator('time',{
                                    initialValue:moment('12:08:06','HH:mm:ss')
                                })(
                                    <TimePicker />
                                )
                            }
                        </FormItem>
                        <FormItem label="头像" {...itemLayout}>
                            {
                                getFieldDecorator('avatar',{
                                    initialValue:'',
                                    // rules:[
                                    //     {
                                    //         required:true,
                                    //         message:'请选择头像'
                                    //     }
                                    // ]
                                })(
                                    <Upload
                                        listType="picture-card"
                                        showUploadList={false}
                                        action="//jsonplaceholder.typicode.com/posts/"  //服务器jsonplaceholder.typicode.com/posts/
                                        beforeUpload={this.beforeUpload}
                                        onChange={this.handleChange}
                                    >
                                        {
                                            this.state.imageUrl ? <img src={this.state.imageUrl} /> : (
                                                <Icon type={this.state.loading? 'loading' : 'plus'} />                                           )
                                        }
                                    </Upload>
                                )
                            }
                        </FormItem>
                        <FormItem {...offsetItemLayout}>
                            {
                                getFieldDecorator('rule_status',{
                                    valuePropName:'checked',
                                    initialValue:true
                                })(
                                    <Checkbox>我已阅读过<a href="/rules">慕课协议</a></Checkbox>
                                )
                            }
                        </FormItem>
                        <FormItem {...offsetItemLayout}>
                            <Button type="primary" onClick={this.onSubmit}>注册</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Fragment>        
        )
    }
}

export default Form.create({})(FormLogin)